<template>
	<view>
		<view 
		style="background-color: rgba(0, 0, 0, 0.2);position: absolute;" 
		:style="{top:y+'rpx',left:x+'rpx',width:width+'rpx',height:height+'rpx'}">
		</view>
		<view style="background-color: white;position: absolute;" 
		@touchmove="move($event,width,height)"
		@touchstart="moveF"
		@touchend="moveE"
		:style="{top:top+'rpx',left:left+'rpx',width:width+'rpx',height:height+'rpx'}"
		>
			<text>me</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top:10,
				left:20,
				x:20,
				y:10,
				width: 210,
				height: 60
			}
		},
		methods: {
			move(e,w,h){
				let a = e.changedTouches[0].clientY*2-h/2
				let b = e.changedTouches[0].clientX*2-w/2
				// 阴影上下跟踪
				this.yMe(a,h)
				// 阴影左右跟踪
				this.xMe(b,w)
				this.top = a
				this.left = b
			},
			moveF(){
			},
			moveE(){
				this.top = this.y
				this.left = this.x
			},
			yMe(a,h){
				if(a>=this.y+h/2){
					this.y += 60
				}else if(a<=this.y-h/2){
					this.y -= 60
				}
			},
			xMe(b,w){
				if(b>=this.x+w/2){
					this.x += 220
				}else if(b<=this.x-w/2){
					this.x -= 220
				}
			}
		}
	}
</script>

<style>
	page{
		margin: 10rpx 20rpx;
		overflow: hidden;
	}
</style>
